﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Unapproved updates
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        Unapproved updates</h2>
    <%Html.Telerik().Grid<Microsoft.UpdateServices.Administration.IUpdate>()
            .Name("updates")
            .Columns(col =>
                    {
                        col.Add(x => x.Id.UpdateId);
                        col.Add(x => x.Title).Title("Update name");
                    })
             .Ajax(ajax => ajax.Route(Routes.UpdatesUnapprovedGridRoute))
             .Render();%>
    <div id="updateDetails">
    </div>
    <%--<div id="approveDialog" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
        <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
            <span id="ui-dialog-title-dialog" class="ui-dialog-title">Approve update</span>
            <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">
                close</span></a>
        </div>
        <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content"
            id="dialog">
            <p id="approveDialogContent">
                Dialog content goes here.</p>
        </div>
    </div>--%>
    <div id="approveDialog" title="Approve update" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable"
        style="display: none">
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
    <script type="text/javascript">
        function approve(updateId) {
            var updateId = $("#updates .t-state-selected td")[0].innerHTML;            

            $("#approveDialog")
                .dialog()
                .dialog('open')
                .html("Loading...");
            $.ajax({
                url: '/Updates/ApproveDialog',
                type: 'POST',
                data: $.toJSON([updateId]),
                contentType: 'application/json',
                success: function (data) {
                    $("#approveDialog").html(data);
                }
            });
        }

        function closeApproveDialog() {            
            $("#approveDialog").dialog('close');
        }

        function approvingBegin() {
            $("#approveDialog").html('Updates are being approved');
        }

        function reject(updateId) {
            var updateId = $("#updates .t-state-selected td")[0].innerHTML;
            if (confirm('Do you really want to reject this update?')) {
                $.ajax({
                    url: '/Updates/RejectUpdate',
                    type: 'POST',
                    data: $.toJSON([updateId]),
                    contentType: 'application/json',
                    success: function (data) {
                        alert('Update has been rejected');
                    }
                });
            }
        }

        $(document).ready(function () {
            $('#updates tbody tr')
                .live("click", function () {
                    // `this` == clicked row

                    var updateId = this.cells[0].innerHTML;

                    // add selected style to clicked row
                    $(this).addClass('t-state-selected')
                           .siblings()
                           .removeClass('t-state-selected');

                    $("#updateDetails")
                        .addClass("loading")
                        .html("")
                        .load('/Update/' + updateId + '/Details', {}, function () {
                            $("#updateDetails").removeClass("loading");
                        });
                })
                .live("mouseenter", $.telerik.hover) /* add hover effects */
                .live("mouseleave", $.telerik.leave);
        });
    </script>
</asp:Content>
